import React, { useEffect } from 'react'
import { ConfigProvider, Layout } from 'antd'
import { MyLayout } from 'components'
import { connect } from 'dva'
import HeaderTabs from 'components/common/headerTabs'
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { banBackSpace } from 'utils/backspaceFool'
import { IsIE_nine } from 'utils/format'

moment.locale('zh-cn');

const { Header, Sider } = MyLayout
const { Content } = Layout

function PrimaryLayout(props) {
  (function () {
    //实现对字符码的截获，keypress中屏蔽了这些功能按键
    document.onkeypress = banBackSpace;
    //对功能按键的获取
    document.onkeydown = banBackSpace;
  })()
  const { dispatch } = props
  const onCollpaseChange = collapsed => {
    props.dispatch({
      type: 'app/handleCollapseChange',
      payload: collapsed,
    })
  }
  useEffect(() => {
    return function cleanUp() {
      sessionStorage.removeItem('loginInfo')
      sessionStorage.removeItem('panes')
      localStorage.removeItem('panes')
      dispatch({
        type: 'headerTaps/updateHeaderTaps',
        payload: {
          panes: [
            {
              title: '工作台',
              path: '/workBench',
              key: '/workBench',
              query: {}
            },
          ]
        },
      });
      dispatch({
        type: 'commonAction/uploadCatch',
        payload: {
          catchObj: {
            deviceUpkeep: [false, true],
            deviceUpkeep_add: [false, true],
            deviceUpkeep_edit: [false, true],
            deviceLedger: [false, true],
            deviceLedger_add: [false, true],
            deviceLedger_edit: [false, true],
            deviceCali: [false, true],
            deviceCali_add: [false, true],
            deviceCali_edit: [false, true],
            deviceCali_detail: [false, true],
            previewPlanModal: [false, true],
            deviceCheck: [false, true],
            deviceCheck_add: [false, true],
            deviceCheck_edit: [false, true]
          }
        }
      })
      window.location.reload()
    }
  }, [dispatch])

  const { children, app } = props
  const { collapsed } = app

  return (
    <>
      <ConfigProvider locale={zhCN}>
        < Layout style={
          {
            height: '100%',
            width: '100%',
            display: 'inline-block'
          }
        } >
          <Sider collapsed={collapsed} />
          <Layout style={{ position: 'relative',float: 'left', width: 'calc(100% - 2.86rem)', left: '2.86rem' }}>
            <Header />
            <Layout style={{marginTop: '80px'}}>
              <HeaderTabs />
              <Content
                style={{
                  overflowX: 'hidden',
                  padding: '0 0.2rem 0.2rem 0.2rem',
                  marginTop: '50px',
                  marginBottom: IsIE_nine() === 9 ? '50px': '',
                }}
              >
                {children}
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </ConfigProvider>
    </>
  )
}

export default connect((app, commonAction, headerTaps) => ({
  app, commonAction, headerTaps
}))(PrimaryLayout)
